<template>
  <quick-search-layout>
    <template #condition>
      <el-form
        :model="condition"
        ref="form"
        inline
        size="small"
        label-position="top"
        label-width="0"
      >
        <el-form-item prop="username">
          <el-input v-model="condition.username" placeholder="用户名" clearable>
          </el-input>
        </el-form-item>
        <el-form-item prop="name">
          <el-input v-model="condition.name" placeholder="真实姓名" clearable>
          </el-input>
        </el-form-item>

        <el-button
          size="small"
          explain
          type="primary"
          icon="el-icon-search"
          @click="getUsers"
          >搜索</el-button
        >
        <el-button size="small" explain icon="el-icon-refresh" @click="reset"
          >重置</el-button
        >
      </el-form>
    </template>

    <slot slot="list" />

    <template #pagination>
      <el-pagination
        @size-change="getUsers"
        @current-change="getUsers"
        :current-page.sync="condition.page_index"
        :page-sizes="[5, 8, 10, 20, 30, 40, 50, 100, 200]"
        :page-size.sync="condition.page_size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </template>
  </quick-search-layout>
</template>

<script>
import _api from "@/common/api/user";
import _employee from "@/common/api/employee";
export default {
  data() {
    return {
      total: 0,
      condition: {
        username: "",
        name: "",
        page_index: 1,
        page_size: 10,
      },
    };
  },
  methods: {
    async getUsers() {
      try {
        const result = await _api.getListAsync(this.condition);
        this.total = +result.total;
        this.$emit("onSearch", result.data);
      } catch (error) {}
    },

    async getEmployee() {
      const condition = {
        page_index: 1,
        page_size: 999,
      };
      try {
        const result = await _employee.getListAsync(condition);
        const employeeOpt = result.data.map((item) => {
          return {
            value: item.id,
            label: item.name,
          };
        });
        this.$emit("onEmployeeOpt", employeeOpt);
      } catch (error) {}
    },

    async reset() {
      this.$refs.form.resetFields();
      await this.getUsers();
    },
  },
  mounted() {
    this.getUsers();
    this.getEmployee();
  },
};
</script>

<style lang="scss" scoped>
</style>